<template>
  <div class="crm-page home-page">
    <div class="page-header">报价</div>
    <!-- <div class="page-card pd10">
      <el-row class="page-search" :gutter="10">
        <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="4">  <el-input v-model="queryParam.searchName" placeholder="请输入报价或客户" /></el-col>
        <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="4">  <el-button type="primary" @click="handleSearch">搜索</el-button></el-col>
      </el-row>
    </div> -->
    <div class="page-content">
      <el-row class="table-btns" :gutter="20">
        <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
          <el-button size="small" @click="handleAdd">新建</el-button>
        </el-col>
        <el-col class="align-right" :xs="24" :sm="24" :md="16" :lg="16" :xl="16">
          <el-select v-model="queryParam.searchStatus" style="width:150px;margin-right:10px" @change="handleSearch">
            <el-option label="全部报价" value="1" />
            <el-option label="我的报价" value="2" />
            <!-- <el-option label="最近已查看" value="3" /> -->
          </el-select>
          <el-select v-model="queryParam.status" style="width:100px;margin-right:10px" @change="handleSearch">
            <el-option label="所有" value="" />
            <el-option v-for="item in quoteStatus" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
          <el-input v-model="queryParam.searchName" style="width:200px;margin-right:10px" placeholder="请输入报价或客户" />
          <el-button type="primary" @click="handleSearch">搜索</el-button>

        </el-col>

      </el-row>
      <BaseTable
        ref="table"
        :load-data="loadData"
        show-selection
        show-delete
        @delete="handleTableDelete"
      >
        <el-table-column
          label="报价单号"
          prop="no"
          width="150"
        >
          <template slot-scope="{row}">
            <a class="table-link" @click="gotoDetail(row)">{{ row.no }}</a>
          </template>
        </el-table-column>
        <el-table-column
          label="报价名称"
          prop="name"
          width="150"
          show-overflow-tooltip
        />
        <el-table-column
          label="客户名称"
          prop="customerName"
          width="150"
          show-overflow-tooltip
        >
          <template slot-scope="{row}">
            <a class="table-link" @click="gotoCusDetail(row)">{{ row.customerName }}</a>
          </template>
        </el-table-column>
        <el-table-column
          label="单据状态"
          prop="status"
          width="100"
        >
          <template slot-scope="{row}">
            {{ getEnumText(quoteStatus, row.status) }}
          </template>
        </el-table-column>
        <!-- <el-table-column
          label="省"

          prop="owner"
        /> -->
        <el-table-column
          label="商机名"
          prop="phone"
          width="150"
          show-overflow-tooltip
        >
          <template slot-scope="{row}">
            <a class="table-link" @click="gotoChanceDetail(row)">{{ row.businessName }}</a>
          </template>
        </el-table-column>
        <el-table-column
          label="总金额（元）"
          prop="status"
          align="right"

          show-overflow-tooltip
        >
          <template slot-scope="{row}">
            {{
              formatMoney(row.amount)
            }}
          </template>
        </el-table-column>
        <el-table-column
          label="币种"
          prop="owner"

          show-overflow-tooltip
        >
          <template slot-scope="{row}">
            {{ getEnumText(currencys, row.currency) }}
          </template>
        </el-table-column>
        <el-table-column
          label="所有人"
          prop="owner"

          show-overflow-tooltip
        />
        <el-table-column
          label="报价日期"
          prop="date"
          width="100"
        >
          <template slot-scope="{row}">
            {{ formatTime(row.date,'YYYY-MM-DD') }}
          </template>
        </el-table-column>
        <el-table-column
          label="创建日期"
          prop="createTime"
          width="200"
        >
          <template slot-scope="{row}">
            {{ formatTime(row.createTime) }}
          </template>
        </el-table-column>
        <el-table-column
          label="创建人"
          prop="createName"

          show-overflow-tooltip
        />
        <el-table-column
          label="操作"
          fixed="right"
          width="200"
          align="center"
        >
          <template slot-scope="{row}">
            <el-button type="text" :disabled="row.status==2||row.status==3" @click="handleUpdate(row)">编辑</el-button>
            <el-button :disabled="row.status==2||row.status==3" type="text" @click="handleDelete(row)">删除</el-button>
            <el-button :disabled="row.status==2||row.status==3" type="text" @click="handleApprove(row)">审批</el-button>
          </template>
        </el-table-column>
      </BaseTable>
    </div>
    <ApproveDialog v-if="approveVisible" :visible="approveVisible" :type="5" :data="curData" @close="handleApproveClose" />
  </div>
</template>
<script>
import { getQuoteList, deleteQuote, getQuote } from '@/api/quote'
import { getEnumText, quoteStatus, currencys } from '@/utils/enums'
import { formatTime } from '@/utils/tools'
import ApproveDialog from '@/components/Approve/ApproveDialog'

export default {
  name: 'Quote',
  components: { ApproveDialog },
  data() {
    return {
      urlParamsAbled: true,
      approveVisible: false,
      quoteStatus,
      currencys,
      visibleTransfer: false,
      curData: { },
      queryParam: {
        searchStatus: '1',
        status: '',
        searchName: ''
      }

    }
  },

  methods: {
    getEnumText,
    formatTime,
    handleSearch() {
      this.urlParamsAbled = false
      this.$refs.table.refresh(true)
    },
    async  handleApprove(row) {
      const data = await getQuote({ id: row.id })
      this.curData = data
      this.approveVisible = true
    },
    handleApproveClose(v) {
      this.approveVisible = false
      if (v) {
        this.$refs.table.refresh()
      }
    },
    loadData(params) {
      const queryParam = {
        searchName: this.queryParam.searchName.trim(),
        status: this.queryParam.status
      }
      if (this.queryParam.searchStatus === '1') {
        queryParam.owner = ''
      } else if (this.queryParam.searchStatus === '2') {
        queryParam.owner = this.USER.userName
      }
      const Params = this.urlParamsAbled ? this.getURLParams() : false
      if (Params && Params.customerId) {
        queryParam.customerId = Params.customerId
      }
      if (Params && Params.searchTimeFlag) {
        queryParam.searchTimeFlag = Params.searchTimeFlag
      }
      // if (Params && Params.contractId) {
      //   queryParam.contractId = Params.contractId
      // }
      return getQuoteList(Object.assign(params, queryParam)).then((res) => {
        // console.log('rrrrrr:', res)
        return res
      })
    },
    handleAdd() {
      this.gotoMainPage('quote/add')
      // this.$router.push({ path: '/quote/add' })
    },
    handleUpdate(row) {
      this.gotoMainPage('quote/update', { id: row.id })
      // this.$router.push({ path: '/quote/update', query: { id: row.id }})
    },
    gotoDetail(row) {
      this.gotoMainPage('quote/info', { id: row.id })
      // this.$router.push({ path: '/quote/info', query: { id: row.id }})
    },
    gotoCusDetail(row) {
      this.gotoMainPage('customer/info', { id: row.customerId })
      // this.$router.push({ path: '/customer/info', query: { id: row.customerId }})
    },
    gotoChanceDetail(row) {
      this.gotoMainPage('chance/info', { id: row.businessId })
      // this.$router.push({ path: '/chance/info', query: { id: row.businessId }})
    },
    closeDialog(v) {
      this.visibleTransfer = false
      if (v) {
        this.$refs.table.refresh()
      }
    },
    handleTableDelete(row) {
      if (this.$refs.table.multipleSelection && this.$refs.table.multipleSelection.length <= 0) {
        this.$message.warning('请选择报价')
        return
      }
      var f = this.$refs.table.multipleSelection.find(f => f.status !== 1)
      if (f) {
        this.$message.warning(`新建状态的报价单才允许删除`)
        return
      }
      this.$confirm('是否确定要删除选中的数据?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteQuote({ ids: this.$refs.table.multipleSelection.map(m => { return m.id }) }).then(res => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.$refs.table.refresh()
        }).catch((error) => {
          console.log(error)
          this.$message({
            type: 'error',
            message: error.message || '删除失败'
          })
        })
      }).catch(() => {
      })
    },
    handleDelete(row) {
      this.$confirm('确定要删除此报价?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteQuote({ ids: [row.id] }).then(res => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.$refs.table.refresh()
        }).catch((error) => {
          console.log(error)
          this.$message({
            type: 'error',
            message: error.message || '删除失败'
          })
        })
      }).catch(() => {

      })
    }
  }
}
</script>
